<template>
  <div class="files">
    <div class="files-list">
      <div v-for="(x, y) in files" :key="y" @click="openFile(x)">
        <div>
          {{ x }}
        </div>
      </div>
    </div>
    <el-dialog title="点开视频" v-model="isVideo" width="800px">
      <video ref="audioRef" autoplay controls>
        <source :src="src" type="audio/mp4">
      </video>
    </el-dialog>
  </div>
</template>
<script setup>
import system from '@/utils/system';
import { onMounted, ref } from 'vue';
const dir = 'D:/cyc/files/comedy'
const files = ref([])
const isVideo = ref(false)
const src = ref('')
onMounted(() => {
  system.readDir(dir).then(res => {
    files.value = res
  })
})
function openFile(x) {
  isVideo.value = true
  src.value = dir + '/' + x
  // console.log(src.value)
  // window.open(dir + '/' + x)
}
</script>
<style scoped lang="scss">
.files-list {
  display: flex;
  flex-wrap: wrap;

  >div {
    // width: 33%;
    margin: 10px;
    display: flex;
    justify-content: left;

    >div {
      padding: 10px;
      border-radius: 10px;
      cursor: pointer;
      background-color: brown;
    }
  }
}

video {
  width: 480px;
  height: 270px;
  margin: 0 auto;
}
</style>
